<template>
  <div>
    <el-row type="flex" justify="center" :gutter="10">
      <el-col :xs="24" :sm="19" :md="15" :lg="8">
        <div class="grid-content bg-purple">
          <h3 class="login_title">欢迎登录 - MMALL管理系统</h3>
          <div class="login_content">
            <el-form :model="registerUser" :rules="rules" ref="registerForm" class="registerForm">
              <el-form-item prop="username">
                <el-input type="text" v-model="registerUser.username" placeholder="请输入账号"></el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input type="password" v-model="registerUser.password" placeholder="请输入密码"></el-input>
              </el-form-item>
              <!-- 登录-->
              <el-form-item>
                <el-button type="primary" class="submit_btn" @click="submitForm('registerForm')">登录</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { login } from "../../api/index";
import  { Row,Col,Button,Form,FormItem,Input }  from "element-ui"
export default {
  name:"Login",
  components:{
    [Row.name]:Row,
    [Col.name]:Col,
    [Button.name]:Button,
    [Form.name]:Form,
    [Input.name]:Input,
    [FormItem.name]:FormItem,
    
  },
  data() {
    return {
      registerUser: {
        username: "admin",
        password: "admin"
      },
      message: {},
      rules: {
        username: [
          {
            required: true,
            message: "账号不能为空",
            trigger: "blur"
          }
        ],
        password: [
          {
            required: true,
            message: "密码不能为空",
            trigger: "blur"
          },
          {
            min: 5,
            max: 30,
            message: "长度在6到30个之间",
            trigger: "blur"
          }
        ]
      },
      time: {}
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          login(this.registerUser)
          .then((res)=>{
              // console.log(res)
              this.message = res.data;
              this.time = res.data.data;
              this.login()
          })
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    login() {
      if (!this.message.status) {
        this.$message({
          message: "恭喜你，登录成功",
          type: "success"
        });
        const obj = {
          data: this.registerUser.username,
          time: Date.now(),
          expire: 1000 * 60 *  30// 单位是分钟
        };
        localStorage.setItem("admin", JSON.stringify(obj));
        this.$router.push({
          name: "home",
          params: {
            user: this.registerUser.username
          }
        });
      } else {
        this.$message({
          message: this.message.msg,
          type: "warning"
        });
      }
    }
  }
};
</script>



<style lang="scss" scoped>
@import "@/scss/index.scss";

.login_content {
  width: 95%;
  margin: 0 auto;
  line-height: 50px;
}
.submit_btn {
  width: 100%;
  @include Bg(#337ab7);
  border-color: #2e6da4;
}
.login_title {
  padding: 15px 15px 0;
  font-weight: 500;
  @include Font(16px, #000);
}
.el-col {
  border-radius: 4px;
}
.bg-purple {
  @include Bg(#fff);
}
.grid-content {
  border-radius: 4px;
  min-height: 210px;
  padding-bottom: 1%;
}
</style>